<template>
	<view class="g-refuse-modal">
		<button class="u-info-btn u-btn-whilte f-fz18" @tap="showModal">拒绝</button>
		<view class="u-modal bottom-modal" :class="[show ? 'z-show' : '']" @tap.stop="hideModal">
			<view class="u-dialog bottom-modal refuse-modal" @tap.stop>
				<view class="u-title f-fz18">
					<text class="f-fc-primary f-fw650">审批意见：</text>
					<text class="f-fc-red f-fw650">拒绝</text>
				</view>
				<view class="refuse-text">
					<u-textarea v-model="refuse" :maxlength="100" :placeholder="'填写您的审批意见'"></u-textarea>
				</view>
				<view class="g-btn-view f-frowspcen">
					<button class="u-info-btn u-btn-whilte f-fz18" @tap.stop="hideModal">取消</button>
					<button class="u-info-btn u-btn-primary f-fz18">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				refuse: ''
			};
		},
		methods: {
			hideModal() {
				this.show = false;
			},
			showModal() {
				this.show = true;
			}
		},
	}
</script>

<style lang="scss">
.g-refuse-modal {
	display: inline-flex;
	.refuse-modal {
		text-align: left;
		padding: 60rpx 40rpx;
		background-color: #FFFFFF;
		.u-title {
			margin-bottom: 60rpx;
		}
		.refuse-text {
			position: relative;
			textarea {
				width: 100%;
				border: 2rpx solid $uni-text-color-grey;
				font-size: 28rpx;
				color: $uni-text-color;
				border-radius: $uni-border-radius-base;
				padding: 30rpx;
			}
		
		}
	}
}
.g-btn-view {
	padding: 80rpx 0 0;
	.u-info-btn:first-child {
		border: 2rpx solid $uni-text-color-red;
	}
}
</style>
